<template>
    <div class="app-container" ref="content">
        <div style="text-align: center;padding: 10px">用户《{{userInfo.name}}》-详情信息</div>
        <el-row :gutter="10">
            <el-form :model="userInfo" ref="userInfo" label-width="100px">
              <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                <div style="text-align: center">
                  <el-image v-if="userInfo.avatar"
                            style="width: 150px; height: 150px"  class="avatar"
                            :src="userInfo.avatar"
                            fit="fill" :preview-src-list="[userInfo.avatar]">
                  </el-image>
                  <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
                  <div style="line-height: 44px">*头像*</div>
                </div>
              </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="用户名:" prop="userName">
                            {{ userInfo.userName }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="姓名:" prop="name">
                            {{ userInfo.name }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="性别:" prop="sex">
                            {{ userInfo.sex | formDateSex }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="联系邮箱:" prop="email">
                            {{ userInfo.email }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="联系电话:" prop="mobile">
                            {{ userInfo.mobile }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="所属企业:" prop="type">
                            {{ userInfo.type == 0 ? "基本企业" : "维保企业" }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="省市县:" prop="userLocation">
                            {{ userInfo.province + userInfo.city + userInfo.county }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="详细地址:" prop="address">
                            {{ userInfo.address }}
                        </el-form-item>
                    </el-col>
                </el-col>
                </el-form>

        </el-row>

<!--        <el-dialog title="视频展示区域" :visible.sync="videoDialogVisible" width="50%">-->
<!--            <div style="position: relative">-->
<!--                <video ref="localVideo" playsinline autoplay width="30%" style="position: absolute;top: 0;left: 0;"></video>-->
<!--                <video ref="remoteVideo" playsinline autoplay width="100%"></video>-->
<!--            </div>-->
<!--            <div style="text-align: center;margin-top: 10px">-->
<!--                <el-button type="danger" @click="leaveVideo">挂断</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
import {getInUserVo} from "@/api/enterprise";
import 'aliyun-webrtc-sdk'
import {joinChannel} from "@/api/alirtc";
export default {
    name: "info",
    data(){
        return{
            userInfo:{

            },
            videoDialogVisible:false
        }
    },
    created() {
        this.$nextTick(() => {
            this.aliWebrtc = new AliRtcEngine();
            this.isSupport(this.aliWebrtc,true)
            this.getInUserVo(this.$route.params.ucId)
        });
    },
    methods:{
        //校验当前设备是否支持
        isSupport(val,debug){
            let option = {}
            if (debug){
                option.isDebug=true
            }
            val.isSupport(option).then((res)=>{
                this.onJoinEvent(val)
                this.onPublisher(val)
                this.onBye(val)
                this.onLeave(val)
                this.OnRefresh(val)
            }).catch((error)=>{
                console.log("不支持webrtc",error.message)
            })
        },
        //本地预览
        startPreview(val){
            this.aliWebrtc.startPreview(this.$refs.localVideo).then(()=>{
                console.log("本地预览")
            }).catch((error) => {
                console.log("预览失败",error)
            });
        },
        //推发布流
        publish(val){
            val.configLocalAudioPublish = true;
            val.configLocalCameraPublish = true;
            val.publish().then(()=>{
                console.log("发布流成功")
            } ,(error)=>{
                console.log("发布流失败",error.message);
            });
        },

        // remote用户加入房间 onJoin
        onJoinEvent(val){
            val.on("onJoin", (publisher) => {
                console.log(publisher)
                if(publisher.userId){
                    console.log(publisher.userId)
                }
                //重置订阅状态
                //默认订阅远端音频和视频大流，但需要调用subscribe才能生效
                //这里取消默认订阅，根据需求进行订阅
                val.configRemoteAudio(publisher.userId, true);
                val.configRemoteCameraTrack(publisher.userId, true, true);
                // showAlert(publisher.displayName + "加入房间","success");
                console.log(publisher.displayName + "加入房间");
            });
        },
        //remote流发布事件 onPublish
        onPublisher(val){
            val.on("onPublisher", (publisher) => {
                val.subscribe(publisher.userId).then((userId)=>{
                    this.$nextTick(() => {
                        val.setDisplayRemoteVideo(userId,this.$refs.remoteVideo,1)
                    });
                },(error)=>{
                    console.log(error.message);
                });
                // let index = publisherList.getIndexByProprety(publisher.userId, "userId");
                // if (index === -1) {
                //   //新增
                //   publisherList.push(publisher);
                // } else {
                //   //流状态更新
                //   updatePublisherStream(publisher, index);
                // }
            });
        },
        //remote流结束发布事件 onUnPublisher
        onUnPublisher(val){
            val.on("onUnPublisher", (publisher) => {
                console.log("onUnPublisher",publisher);
                // detelePublisher(publisher.userId);
                // removeDom(publisher.userId);
                // initialization(publisher.userId);
            });
        },
        // 被服务器踢出或者频道关闭时回调 onBye
        onBye(val){
            val.on("onBye",(message) =>{
                //1:被服务器踢出
                //2:频道关闭
                //3:同一个ID在其他端登录,被服务器踢出
                var msg;
                switch (message.code) {
                    case 1:
                        msg = "被服务器踢出";
                        break;
                    case 2:
                        msg = "频道关闭";
                        break;
                    case 3:
                        msg = "同一个ID在其他端登录,被服务器踢出";
                        break;
                    default:
                        msg = "onBye";
                }

            });
        },
        leaveVideo(){
            this.aliWebrtc.leaveChannel();
            this.aliWebrtc.dispose();
            this.videoDialogVisible = false
        },
        /**
         * 检测到用户离开频道
         * 更新用户列表
         * 移除用户视图
         */
        onLeave(val){
            val.on("onLeave", (publisher) => {
                console.log(publisher);
                // this.videoList.splice(this.videoList.findIndex(function(item) {
                //     return item === publisher;
                // }),1)
            })
        },
        //页面刷新时调用
        OnRefresh(val){
            window.onbeforeunload=function (e) {
                if (!val){
                    console.log("isSupport失败");
                    return ;
                }
                val.leaveChannel();
                val.dispose();
            }
        },
        //移除 dom
        endVideo(val){
            if (val!=null){
                val.leaveChannel();
                val.dispose();
            }
        },
        getInUserVo(val){
            //获取企业信息数据
            let loadingInstance = this.$loading({
                target:this.$refs.content,
                text:'数据加载中'
            });
            getInUserVo({ucId:val}).then(res=>{
                console.log(res)
                this.userInfo = res.data
                loadingInstance.close()
                this.$notify.success({
                    title: '成功',
                    message: "获取角色信息成功"
                })
            }).catch(error=>{
                console.log(error)
                loadingInstance.close()
                this.$notify.error({
                    title: '失败',
                    message: "获取角色信息失败"
                })
            })
        },
        realTimeVideo(){
            //发起实时视频功能
            //展示弹窗区信息
            let _this = this
            this.videoDialogVisible = true
            joinChannel({displayName:_this.userInfo.name,channelId:_this.userInfo.ucId}).then(res=>{
                console.log(res.data)
                _this.aliWebrtc.joinChannel(res.data,_this.userInfo.name).then(obj=>{
                    _this.$nextTick(() => {
                        _this.publish(_this.aliWebrtc)
                        _this.startPreview(_this.aliWebrtc)
                    });
                    console.log("加入频道成功")
                }).catch((error)=>{
                    console.log("加入频道失败",error)
                })
            }).catch(error=>{
                console.log("加入频道失败",error)
            })
        }

    }

}
</script>

<style>
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 149px;
    height: 149px;
    line-height: 149px;
    text-align: center;
}
.avatar {
    width: 149px;
    height: 149px;
    display: block;
    margin: 0 auto; /*水平居中*/
}
</style>